<!doctype html>
<html class="no-js h-100" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link th:href="@{'https://fonts.googleapis.com/icon?family='+'Material+Icons'}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" id="main-stylesheet" data-version="1.1.0" th:href="@{/styles/shards-dashboards.1.1.0.min.css}">
    <link rel="stylesheet" th:href="@{/styles/extras.1.1.0.min.css}">
    <script async defer th:src="@{https://buttons.github.io/buttons.js}"></script>
</head>
<body class="h-100">
<div class="color-switcher animated">
    <h5>Accent Color</h5>
    <ul class="accent-colors">
        <li class="accent-primary active" data-color="primary">
            <i class="material-icons">check</i>
        </li>
        <li class="accent-secondary" data-color="secondary">
            <i class="material-icons">check</i>
        </li>
        <li class="accent-success" data-color="success">
            <i class="material-icons">check</i>
        </li>
        <li class="accent-info" data-color="info">
            <i class="material-icons">check</i>
        </li>
        <li class="accent-warning" data-color="warning">
            <i class="material-icons">check</i>
        </li>
        <li class="accent-danger" data-color="danger">
            <i class="material-icons">check</i>
        </li>
    </ul>
    <div class="actions mb-4">
        <a class="mb-2 btn btn-sm btn-primary w-100 d-table mx-auto extra-action" href="#">
            <i class="material-icons">cloud</i> Download</a>
        <a class="mb-2 btn btn-sm btn-white w-100 d-table mx-auto extra-action" href="#">
            <i class="material-icons">book</i> Documentation</a>
    </div>
    <div class="social-wrapper">
        <div class="social-actions">
            <h5 class="my-2">Help us Grow</h5>
            <div class="inner-wrapper">
                <a class="github-button" href="#" data-icon="octicon-star" data-show-count="true" aria-label="Star DesignRevision/shards-dashboard on GitHub">Star</a>
            </div>
        </div>
        <div id="social-share" data-url="#" data-text="🔥 Check out Shards Dashboard Lite, a free and beautiful Bootstrap 4 admin dashboard template!" data-title="share"></div>
        <div class="loading-overlay">
            <div class="spinner"></div>
        </div>
    </div>
    <div class="close">
        <i class="material-icons">close</i>
    </div>
</div>
<div class="color-switcher-toggle animated pulse infinite">
    <i class="material-icons">settings</i>
</div>
<div class="container-fluid">
    <div class="row">
        <!-- Main Sidebar -->
        <aside class="main-sidebar col-12 col-md-3 col-lg-2 px-0">
            <div class="main-navbar">
                <nav class="navbar align-items-stretch navbar-light bg-white flex-md-nowrap border-bottom p-0">
                    <a class="navbar-brand w-100 mr-0" href="#" style="line-height: 25px;">
                        <div class="d-table m-auto">
                            <img id="main-logo" class="d-inline-block align-top mr-1" style="max-width: 25px;" th:src="@{/images/shards-dashboards-logo.svg}" alt="Shards Dashboard">
                            <span class="d-none d-md-inline ml-1">Shards Dashboard</span>
                        </div>
                    </a>
                    <a class="toggle-sidebar d-sm-inline d-md-none d-lg-none">
                        <i class="material-icons">&#xE5C4;</i>
                    </a>
                </nav>
            </div>
            <form action="#" class="main-sidebar__search w-100 border-right d-sm-flex d-md-none d-lg-none">
                <div class="input-group input-group-seamless ml-3">
                    <div class="input-group-prepend">
                        <div class="input-group-text">
                            <i class="fas fa-search"></i>
                        </div>
                    </div>
                    <input class="navbar-search form-control" type="text" placeholder="Search for something..." aria-label="Search"></div>
            </form>
            <div class="nav-wrapper">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link " onclick="change(0)">
                            <i class="material-icons">edit</i>
                            <span>My Blog</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " onclick="change(1)">
                            <i class="material-icons">vertical_split</i>
                            <span>Blog Posts</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" onclick="change(2)">
                            <i class="material-icons">note_add</i>
                            <span>Add New Post</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " onclick="change(4)">
                            <i class="material-icons">table_chart</i>
                            <span>Tables</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " onclick="change(5)">
                            <i class="material-icons">person</i>
                            <span>User Profile</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " onclick="change(6)">
                            <i class="material-icons">error</i>
                            <span>Errors</span>
                        </a>
                    </li>
                </ul>
            </div>
        </aside>
        <main class="main-content col-lg-10 col-md-9 col-sm-12 p-0 offset-lg-2 offset-md-3">
            <div class="main-navbar sticky-top bg-white">
                <!-- Main Navbar -->
                <nav class="navbar align-items-stretch navbar-light flex-md-nowrap p-0">
                    <form action="#" class="main-navbar__search w-100 d-none d-md-flex d-lg-flex">
                        <div class="input-group input-group-seamless ml-3">
                            <div class="input-group-prepend">
                                <div class="input-group-text">
                                    <i class="fas fa-search"></i>
                                </div>
                            </div>
                            <input class="navbar-search form-control" type="text" placeholder="Search for something..." aria-label="Search"> </div>
                    </form>
                    <ul class="navbar-nav border-left flex-row ">
                        <li class="nav-item border-right dropdown notifications">
                            <a class="nav-link nav-link-icon text-center" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="nav-link-icon__wrapper">
                                    <i class="material-icons">&#xE7F4;</i>
                                    <span class="badge badge-pill badge-danger">2</span>
                                </div>
                            </a>
                            <div class="dropdown-menu dropdown-menu-small" aria-labelledby="dropdownMenuLink">
                                <a class="dropdown-item" href="#">
                                    <div class="notification__icon-wrapper">
                                        <div class="notification__icon">
                                            <i class="material-icons">&#xE6E1;</i>
                                        </div>
                                    </div>
                                    <div class="notification__content">
                                        <span class="notification__category">Analytics</span>
                                        <p>Your website’s active users count increased by
                                            <span class="text-success text-semibold">28%</span> in the last week. Great job!</p>
                                    </div>
                                </a>
                                <a class="dropdown-item" href="#">
                                    <div class="notification__icon-wrapper">
                                        <div class="notification__icon">
                                            <i class="material-icons">&#xE8D1;</i>
                                        </div>
                                    </div>
                                    <div class="notification__content">
                                        <span class="notification__category">Sales</span>
                                        <p>Last week your store’s sales count decreased by
                                            <span class="text-danger text-semibold">5.52%</span>. It could have been worse!</p>
                                    </div>
                                </a>
                                <a class="dropdown-item notification__all text-center" href="#"> View all Notifications </a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle text-nowrap px-3" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                                <img class="user-avatar rounded-circle mr-2" th:src="${UserInfo.image}" alt="User Avatar">
                                <span class="d-none d-md-inline-block" th:text="${UserInfo.name}">admin</span>
                                <span id="admin" style="display: none" th:text="${UserInfo.email}">admin</span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-small">
                                <a class="dropdown-item" onclick="change(5)">
                                    <i class="material-icons">&#xE7FD;</i> Profile</a>
                                <a class="dropdown-item" onclick="change(1)">
                                    <i class="material-icons">vertical_split</i> Blog Posts</a>
                                <a class="dropdown-item" onclick="change(2)">
                                    <i class="material-icons">note_add</i> Add New Post</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item text-danger" th:href="@{/index/login-33}">
                                    <i class="material-icons text-danger">&#xE879;</i> Logout </a>
                            </div>
                        </li>
                    </ul>
                    <nav class="nav">
                        <a href="#" class="nav-link nav-link-icon toggle-sidebar d-md-inline d-lg-none text-center border-left" data-toggle="collapse" data-target=".header-navbar" aria-expanded="false" aria-controls="header-navbar">
                            <i class="material-icons">&#xE5D2;</i>
                        </a>
                    </nav>
                </nav>
            </div>
        </main>
    </div>
</div>


<!--//页面跳转-->
<iframe style="width: 100%; height: 100%;" th:src="@{/index/index}" id="iframe"></iframe>

<div class="promo-popup animated">
    <a href="#" class="pp-cta extra-action">
        <img th:src="@{https://dgc2qnsehk7ta.cloudfront.net/uploads/sd-blog-promo-2.jpg}"}> </a>
    <div class="pp-intro-bar"> Need More Templates?
        <span class="close">
          <i class="material-icons">close</i>
        </span>
        <span class="up">
          <i class="material-icons">keyboard_arrow_up</i>
        </span>
    </div>
    <div class="pp-inner-content">
        <h2>Shards Dashboard Pro</h2>
        <p>A premium & modern Bootstrap 4 admin dashboard template pack.</p>
        <a class="pp-cta extra-action" href="#">Download</a>
    </div>
</div>



<script>
    function change(index){
        frames=document.getElementById("iframe");
        admin=document.getElementById("admin");
        switch (index){
            case 0:
                frames.setAttribute("src","/index/index");
                break;
            case 1:
                frames.setAttribute("src","/index/components-blog-posts");
                break;
            case 2:
                frames.setAttribute("src","/index/add-new-post");
                break;
            case 4:
                frames.setAttribute("src","/index/tables");
                break;
            case 5:
                frames.setAttribute("src","/index/user-profile-lite/"+admin.innerText);
                break;
            case 6:
                frames.setAttribute("src","/index/errors");
                break;
        }
    }
</script>
<script th:src="@{/scripts/jquery-3.3.1.min.js}"></script>
<script th:src="@{/scripts/popper.min.js}"></script>
<script th:src="@{/scripts/bootstrap.min.js}"></script>
<script th:src="@{/scripts/Chart.min.js}"></script>
<script th:src="@{/scripts/shards.min.js}"></script>
<script th:src="@{/scripts/jquery.sharrre.min.js}"></script>
<script th:src="@{/scripts/extras.1.1.0.min.js}"></script>
<script th:src="@{/scripts/shards-dashboards.1.1.0.min.js}"></script>
</body>
</html>